<!-- 退款详情 -->
<template>
	<view class="refund-detail page-background">
		<view class="status-area">
			<view class="status">
				{{refundDetail.statusValue}}
			</view>
			<view class="tips">
				{{refundDetail.status==4?'平台将在1~7个工作日为您操作退款，具体到账日期以银行打款日期为准，如遇打款失败，请联系平台客服。':''}}
			</view>
			<!-- <view class="appoint-numbers">
				<text class="ready-number">{{3}}</text><text class="center-line">/</text>{{20}}
			</view> -->
		</view>
		<view class="course-item item-box">
			<view class="top-row flex-box">
				<view @click="topClick" class="left flex-box">
					<view class="jlbicon"></view>
					<view class="club-name">
						{{refundDetail.clubName}}
					</view>
					<image v-if="false" class="icon-arrow" :src="'@/static/images/icon-arrow.png'|addBaseImgUrl" mode=""></image>
				</view>
				<view class="right status">
					<!-- {{status}} -->
				</view>
			</view>
			<view @click="toGoodsDetail" class="course-info flex-box">
				<template v-if="refundDetail.type=='2'">
					<view class="left circle" >
						<image v-if="refundDetail.coachIcon" :src="refundDetail.coachIcon" mode="aspectFill"></image>
						<image v-else :src="'@/static/images/image-default.png'|addBaseImgUrl" />
					</view>
				</template>
				<template v-else>
					<view class="left" >
						<image :src="refundDetail.goodsUrl" mode="aspectFill"></image>
						<view class="small" v-if="refundDetail.actType=='2'">
							<view>赛事</view>
						</view>
					</view>
				</template>
				<view class="right">
					<view class="">
						<view class="title-price flex-box">
							<view class="course-title line-clamp-2">
								{{refundDetail.goodsName}}
							</view>
							<view class="course-price">
								￥<text>{{refundDetail.orderAmount|floorTwo}}</text>
							</view>
						</view>
						<view class="place_now line-clamp-1">
							{{refundDetail.actPlaceName?refundDetail.actPlaceName:refundDetail.placeName}}
						</view>
						<view class="huismall" v-if="refundDetail.type=='1'">{{datetit(refundDetail.actStartDate)}} {{week=="1"?'周一':week=="2"?'周二':week=="3"?'周三':week=="4"?'周四':week=="5"?'周五':week=="6"?'周六':week=="0"?'周日':''}} {{refundDetail.actStartTime.slice(0,5)+'-'+refundDetail.actEndTime.slice(0,5)}}</view>
						<view class="jibie" v-if="refundDetail.type=='1'">
							<view class="man">{{'男L'+refundDetail.levelStart+'-L'+refundDetail.levelEnd}}</view>
							<view class="woman">{{'女L'+refundDetail.girlLevelStart+'-L'+refundDetail.girlLevelEnd}}</view>
						</view>
						<view class="venue">
							<!-- {{content}} -->
						</view>
					</view>
					<view class="tags flex-box" v-if="refundDetail.type!=='1'">
						<view v-for="(item,index) in (refundDetail.goodsSpec?[refundDetail.goodsSpec]:[])" :key="index" class="lit-tag">
							{{item}}
						</view>
						<view class="langClass flex-box" v-if="refundDetail.type=='2' && refundDetail.classType!=='2'">
							<view class="" v-if="refundDetail.hourType=='0'">
								{{refundDetail.totalCount}}课时
							</view>
							<view class="" v-if="refundDetail.hourType=='1'">
								不限课时
							</view>
							<view class="" v-if="refundDetail.classDays&&refundDetail.classDays>0">
								有效期{{refundDetail.classDays}}天
							</view>
						</view>
						<!-- <slot name="btn-row"></slot> -->
					</view>
				</view>
			</view>
		</view>
		<view class="refund-info item-box">
			<view class="info-row flex-box">
				<view class="row-label">
					申请时间：
				</view>
				<view class="row-value">
					{{refundDetail.createDate}}
				</view>
			</view>
			<view class="info-row flex-box">
				<view class="row-label">
					申请原因：
				</view>
				<view class="row-value">
					{{refundDetail.refundTypeValue||''}}
				</view>
			</view>
			<view v-if="refundDetail.refundAmount" class="info-row flex-box">
				<view class="row-label">
					退款金额：
				</view>
				<view class="row-value">
					<text>￥</text>{{refundDetail.refundAmount|floorTwo}}
				</view>
			</view>
			<view class="info-row flex-box">
				<view class="row-label">
					申请说明：
				</view>
				<text class="row-value">
					{{refundDetail.remarks}}
				</text>
			</view>
		</view>
		
		<view class="item-box progress-module">
			<view class="item-label">
				申请进度
			</view>
			<view class="progress-list">
				<view v-for="(item,index) in refundDetail.clubRecordsList" :key="index" class="progress-item">
					<view class="item-main flex-box">
						<view class="left">
							<image :src="item.userIcon" mode=""></image>
						</view>
						<view class="right">
							<view class="title">
								{{item.operate}}
							</view>
							<view class="time">
								{{formatTime(item.createDate)}}
							</view>
						</view>
					</view>
					<view v-if="item.remarks" class="item-remarks">
						{{item.remarks||''}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="cancelBtnShow||sureBtnShow" class="fixed-bottom">
			<view @click="cancelRefund" v-if="cancelBtnShow" class="btn btn-cancel">
				取消申请
			</view>
			<view @click="sureRefund" v-if="sureBtnShow" class="btn btn-sure">
				确认申请
			</view>
		</view>
		<!-- 弹出框 -->
		<van-dialog id="van-dialog" confirm-button-color="#2E87FF" cancel-button-color="#2E87FF" />
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import {dateUtils,messageAuth} from '@/common/js/util.js'
	import Dialog from '@/wxcomponents/vant/dist/dialog/dialog'
	import { rili } from '@/common/js/util.js'
	export default {
		data() {
			return {
				refundDetail: {},
				type: 0,
				sureFlag: true,
				week: rili.getweekDay(this.$props.actStartDate),
			};
		},
		onLoad(data) {
			this.id = data.id || ''
			this.type = data.type || 0
			if(this.id){
				this.init()
			}
		},
		computed:{
			...mapState(['userInfo', 'accessToken']),
			cancelBtnShow(){
				const a = this.refundDetail
				// taskStatus:4待审 5驳回 6完成 7通过 8取消
				// taskSub:流转（0结束1申请人2俱乐部3平台）
				if(a.taskStatus=='4'||a.taskStatus=='7'){
					return true
				}else{
					return false
				}
			},
			sureBtnShow(){
				const a = this.refundDetail
				// taskStatus:4待审 5驳回 6完成 7通过 8取消
				// taskSub:流转（0结束1申请人2俱乐部3平台）
				if(a.taskStatus=='7'&&a.taskSub=='1'||a.status=='7'){
					return true
				}else{
					return false
				}
			}
		},
        methods:{
			async init(){
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				let res = {}
				if(this.type=='1'){
					res = await this.$api.getRefundById(param, this.id)
				}else{
					res = await this.$api.getRefundByOrderId(param, this.id)
				}
				if(res && res.code == 200){
					this.refundDetail = res.data
				}
			},
            cancelRefund(){
				Dialog.confirm({
					title: '确定取消退款？',
					cancelButtonText: '取消',
					width: '325px',
					messageAlign: 'left',
					customStyle: 'border-radius:7.5px;',
					className: 'my-dialog-confirm'
				})
				.then(() => {
					// on confirm
					this.cancelRefundSure()
				})
				.catch(() => {
					// on cancel
								
				})
				
			},
			async cancelRefundSure(){
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				const res = await this.$api.cancelRefund(param, this.refundDetail.id)
				if(res && res.code == 200){
					let timer = setTimeout(()=>{
						clearTimeout(timer)
						uni.navigateBack({
							delta:1
						})
					},2000)
				}
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			},
			back(){
				this.sureFlag = true
				uni.navigateBack({
					delta:1,
				})
			},
			async sureRefund(){
				if(!this.sureFlag){
					return false
				}
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				this.sureFlag = false
				const res = await this.$api.confirmRefund(param, this.refundDetail.id)
				if(res && res.code == 200){
					// let timer = setTimeout(()=>{
					// 	clearTimeout(timer)
					// 	uni.navigateBack({
					// 		delta:1
					// 	})
					// },2000)
					
					messageAuth.requestAuth('COMFIRM_REFUND_REQUEST',this.back)
				}else{
					this.sureFlag = true
				}
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			},
			toGoodsDetail(){
				let obj = this.refundDetail
				let url = ''
				if(obj.type=='2'){
					url = '/course/detail/detail?id=' + obj.classId
				}else if(obj.type=='1'){
					url = '/activity/detail/detail?id=' + obj.actId
				}else{
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			formatTime(time){
				return time.replace(/-/g,'.')
			},
			weeknames(a) {
				let text = '';
				switch (a) {
					case '1':
						text = '周一';
						break;
					case '2':
						text = '周二';
						break;
					case '3':
						text = '周三';
						break;
					case '4':
						text = '周四';
						break;
					case '5':
						text = '周五';
						break;
					case '6':
						text = '周六';
						break;
					case '0':
						text = '周日';
						break;
				}
				return text;
			},
			datetit(a){
				let date = a.split("-");
				return `${date[1]}月${date[2]}日`
			},
			topClick(){
				if(this.arrowShow&&this.clubId){
					uni.navigateTo({
						url: '/mainProcess/club/detail/detail?id='+this.clubId
					})
				}
			}
        }
	}
</script>

<style scoped lang="scss">
	.refund-detail{
		min-height: 100vh;
		padding-bottom: 130rpx;
		.status-area{
			position: relative;
			min-height: 130rpx;
			background-color: $public-color-blue1;
			padding: 20rpx;
			.status{
				color: white;
				font-size: 36rpx;
			}
			.tips{
				font-size: 26rpx;
				color: #8CBCFC;
			}
			.appoint-numbers{
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				color: white;
				font-size: 24rpx;
				.ready-number{
					font-size: 60rpx;
				}
				.center-line{
					margin: 0 10rpx;
				}
			}
		}
		
		.course-item{
			min-height: 200rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.top-row{
				height: 30rpx;
				.left{
					align-items: center;
					.club-name{
						font-size: 30rpx;
						line-height: 30rpx;
						margin-right: 20rpx;
					}
					.icon-arrow{
						width: 12rpx;
						height: 20rpx;
					}
					.jlbicon{
						width:32rpx;
						height: 32rpx;
						background:url('@/static/images/icon-vipcard-club.png') no-repeat;
						background-size:100% 100%;
						margin-right:12rpx;
					}
				}
				.right{
					color: #FDB42E;
					font-size: 26rpx;
					line-height: 30rpx;
					position: relative;
				}
			}
			.course-info{
				height: 160rpx;
				margin-top: 30rpx;
				align-items: stretch;
				.left{
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					flex: 0 0 auto;
					background-color: #F2F2F2;
					border-radius: 15rpx;
					position: relative;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
						vertical-align: middle;
						border-radius: 15rpx;
					}
					.small{
						position: absolute;
						left: 0;
						top:0;
						width: 68rpx;
						text-align: center;
						view{
							padding: 0 10rpx;
							background-color: #FDE3DC;
							color: #F77350;
							height: 32rpx;
							line-height: 29rpx;
							border-radius: 5rpx;
							color:#F77350;
							font-size: 24rpx;
						}
					}
				}
				.circle{
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}
				.right{
					width: 544rpx;
					display: flex;
					flex-flow: column;
					// justify-content: space-between;
					.title-price{
						align-items: flex-start;
						.course-title{
							line-height: 38rpx;
							max-width: 340rpx;
						}
						.course-price{
							font-size: 24rpx;
							line-height: 38rpx;
							text{
								font-size: 30rpx;
							}
						}
					}
					.venue{
						font-size: 26rpx;
						color: $text-color-grey;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					.tags{
						justify-content: space-between;
						align-items: center;
						.lit-tag{
							margin-top: 13rpx;
						}
						.langClass{
							view{
								color: #FDB42E;
								font-size: 26rpx;
							}
							view:last-child{
								margin-left: 15rpx;
							}
						}
					}
					.place_now{
						font-size: 24rpx;
						color: $text-color-grey;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						max-width: 50%;
					}
					.huismall{
						font-size: 24rpx;
						margin-bottom: 10rpx;
						color: #999999;
					}
					.jibie{
						width: 100%;
						display: flex;
						margin-bottom:20rpx;
						.man{
							background-color:transparent!important;
							border:1px solid #C8DBFF;
							color:#2E87FF!important;
							line-height: 29rpx;
							margin-right: 10rpx;
							font-size: 24rpx;
							border-radius: 3px;
							padding: 5rpx 8rpx;
						}
						.woman{
							background-color:transparent!important;
							border:1px solid #FFC8C3;
							color:#E14806;
							line-height: 29rpx;
							font-size: 24rpx;
							border-radius: 3px;
							padding: 5rpx 8rpx;
						}
					}
				}
			}
		}
		
		.refund-info{
			padding: 20rpx;
			view{
				line-height: 50rpx;
			}
			.info-row{
				align-items: flex-start;
				justify-content: flex-start;
				padding: 5rpx 0;
				.row-label{
					min-width: 156rpx;
				}
				.row-value{
					text{
						font-size: 24rpx;
					}
				}
			}
		}
		
		.progress-module{
			padding: 30rpx 20rpx;
			.item-label{
				line-height: 30rpx;
				margin-bottom: 30rpx;
			}
			.progress-list{
				.progress-item{
					.item-main{
						justify-content: space-between;
						align-items: center;
						.left{
							width: 110rpx;
							height: 110rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 20rpx;
							background-color: #F2F2F2;
							image{
								width: 100%;
								height: 100%;
								vertical-align: middle;
								overflow: hidden;
							}
						}
						.right{
							flex: 1 0 auto;
							.title{
								font-size: 34rpx;
							}
							.time{
								font-size: 24rpx;
								color: $text-color-grey;
							}
						}
					}
					.item-remarks{
						border-radius: 15rpx;
						background-color: #F5F5F5;
						margin: 10rpx 0 0 120rpx;
						padding: 25rpx 30rpx;
						position: relative;
						color: $text-color-dark-grey;
						font-size: 26rpx;
						&:before{
							content: '';
							position: absolute;
							top: -14rpx;
							left: 28rpx;
							// background-color: red;
							width: 0;
							height: 0;
							border-style: solid;
							border-color: transparent transparent #F5F5F5;
							border-width: 0 12rpx 14rpx;
							
						}
					}
					&+.progress-item{
						margin-top: 60rpx;
					}
				}
			}
		}
		
		.fixed-bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			height: 108rpx;
			padding: 10rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.btn{
				width: 243rpx;
				height: 78rpx;
				border-radius: 39rpx;
				line-height: 74rpx;
				text-align: center;
				font-size: 32rpx;
				margin-left: 20rpx;
				&.btn-sure{
					color: $public-color-blue1;
					border: 2rpx solid $public-color-blue1;
				}
				&.btn-cancel{
					color: $text-color-grey;
					border: 2rpx solid #E9E9E9;
				}
			}
		}
	}
</style>

